<template>
	<view>
		<view class="header_bt_01">
			<image :src="userinfo.userImg" class="hander_tx"></image>
			<uni-search-bar class="uni-mt-10" style="color: #f3f3f3;" bgColor="#F8F8F8" radius="100"
				placeholder="搜索兼职信息" clearButton="auto" cancelButton="auto" @confirm="search" />
		</view>
		<!-- 兼职信息-->
		<uni-group mode="card" v-for="(item,i) in DataList" :key="i">
			<view class="uni_bottor_xz">
				<!--闲置模块内1功能区 -->
				<view class="uni_bottor_xz_1">
					<!--闲置模块内2功能区 头像 昵称 时间 购买 -->
					<view class="uni_bottor_xz_2">
						<!--头像 -->
						<image :src="item.userImg" class="uniBt_tx"></image>
						<!--昵称 -->
						<text class="uniBt_Name">{{ item.userName }}</text>
						<!--发布时间 -->
						<text class="uniBt_Time">{{ item.Ftime }}</text>
						<!--右侧按钮 -->
						<button class="uniBt_but" type="warn" size="mini" >已报名/等待面试</button>
					</view>
				</view>
			</view>
			<!--闲置模块内3 外围边框灰底 -->
			<uni-group mode="card" top=60 v-if="userinfo.userType==='新用户' || userinfo.userType==='跑腿'">
				<view class="uni_bottor_xz_4">
					<!--闲置模块内55 功能区 标题 介绍 右侧图片 价格 -->
					<view style="height:800rpx;">
						<text class="nuiBt_title">发布招聘</text>
						<text class="nuiBt_title_x">{{ item.title_x }}</text>
						<view style="padding: 5px;">
							<!--工作时间-->
							<view class="uni_border_xs_1">
								<image class="uni_border_img_1"
									src="http://124.222.72.174:8008/images/动态区块兼职信息-Pt_information/工作日期.png"></image>
								<text class="uni_border_rt1">工作日期</text>
								<text class="uni_border_text_1">{{ item.working_date }}</text>
							</view>
							<!--工作时段-->
							<view class="uni_border_xs_2">
								<image class="uni_border_img_2"
									src="http://124.222.72.174:8008/images/动态区块兼职信息-Pt_information/时段.png"></image>
								<text class="uni_border_rt2">工作时段</text>
								<text class="uni_border_text_2">{{ item.working_hours }}</text>
							</view>
							<!--工作地点-->
							<view class="uni_border_xs_3">
								<image class="uni_border_img_3"
									src="http://124.222.72.174:8008/images/动态区块兼职信息-Pt_information/工作地点.png"></image>
								<text class="uni_border_rt3">工作地点</text>
								<text class="uni_border_text_3">{{ item.working_address }}</text>
							</view>
						</view>
						<view style="padding: 5px;margin-top: 70px;">
							<!--工作内容-->
							<view style="height: 100px;">
								<text class>【工作内容】\n</text>
								<text>1、{{ item.working_Nr1 }}\n</text>
								<text>2、{{ item.working_Nr2 }}\n</text>
								<text>3、{{ item.working_Nr3 }}\n</text>
							</view>
							<!--工作要求-->
							<view style="height: 100px;">
								<text>【工作要求】\n</text>
								<text>1、{{ item.working_Yq1 }}\n</text>
								<text>2、{{ item.working_Yq2 }}\n</text>
								<text>3、{{ item.working_Yq3 }}\n</text>
							</view>
						</view>
						<text class="nuiBt_Picer_3">酬金{{ item.price }}/天</text>
						<view class="">
							<text>【面试联系电话】\n</text>
							<text>19890541233\n</text>
							<text style="color: red;">【面试截至时间】\n</text>
							<text style="color: red;">2022-04-03至2022-04-10</text>
						</view>
					</view>
				</view>
			</uni-group>
			<!-- 商户页面 -->
			<uni-group mode="card" top=60 v-else-if="userinfo.userType==='学生' || userinfo.userType==='学工'">
				<view class="uni_bottor_xz_4">
					<!--闲置模块内55 功能区 标题 介绍 右侧图片 价格 -->
					<view >
						<view style="padding: 5px;">
							<!--工作内容-->
							<view style="height: 120px;">
								<text class>【基础个人信息】\n</text>
								<text>姓名、{{ item.StuName }}\n</text>
								<text>学号、{{ item.StuId }}\n</text>
								<text>专业、{{ item.Stumajor }}\n</text>
								<text>宿舍、{{ item.Studormitory }}\n</text>
							</view>
							\n
							<!--工作要求-->
							<view style="height: 110px;">
								<text>【工作经验】\n</text>
								<text>1、{{ item.Stuwork1 }}\n</text>
								<text>2、{{ item.Stuwork2 }}\n</text>
								<text>3、{{ item.Stuwork3 }}\n</text>
							</view>
						</view>
						<text class="nuiBt_Picer_3">酬金{{ item.price }}/天</text>
						<view class="">
							<text>【面试联系电话】\n</text>
							<text>{{ item.Stuphone }}\n</text>
							<text style="color: red;">【面试截至时间】\n</text>
							<text style="color: red;">2022-04-03至2022-04-10</text>
						</view>
					</view>
				</view>
			</uni-group>
			<view v-if="userinfo.userType==='学生' || userinfo.userType==='学工'">
				<button class="BjBunn2" @click="Bjtext(item)" size="mini">编辑发布信息</button>
				<button class="BjBunn1" @click="YesGood(item)" size="mini">通过</button>
				<button class="BjBunn3" @click="MoeNoper(item)" size="mini">取消</button>
			</view>
			<view v-else-if="userinfo.userType==='新用户' || userinfo.userType==='跑腿'">
				<button class="BjBunn2" @click="Bjtext(item)" size="mini">编辑报名信息</button>
				<button class="BjBunn3" @click="StuNoper(item)" size="mini">取消</button>
			</view>
			
		</uni-group>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			// 将 m_user 模块中的 userinfo 映射到当前页面中使用
			...mapState('m_user', ['userinfo']),
		},
		data() {
			return {
				//数据集合
				DataList: [],
			};
		},
		onLoad() {
			this.onloadSj()
		},
		methods:{
			//商户通过
			YesGood(item){
				const that = this
				uni.showModal({
					title: '报名提示',
					content: '确定录用该学生吗?',
					cancelText: "取消",
					confirmText: "确定",
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							//当用户点击报名的时候提交报名信息 并且返回应聘中心
							
							//成功
							uni.$showMsg("操作成功！")
							setTimeout(function(){
								uni.navigateBack({
									
								})
							},1000)
							
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//商户取消
			MoeNoper(item){
				const that = this
				uni.showModal({
					title: '报名提示',
					content: '确定不录用该学生吗?',
					cancelText: "取消",
					confirmText: "确定",
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							//当用户点击报名的时候提交报名信息 并且返回应聘中心
							
							//成功
							uni.$showMsg("操作成功！")
							setTimeout(function(){
								uni.navigateBack({
									
								})
							},1000)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//学生取消
			StuNoper(item){
				
			},
			//编辑报名信息
			Bjtext(item){
				console.log(item)
				// //向编辑页面传递数据
				// uni.setStorage({
				// 	key: 'BjReg',
				// 	data: item,
				// 	success: function() {
				// 		console.log("向下级发送：" + item)
				// 	}
				// })
				//向下级传递订单编号 下级通过订单编号去查找信息
				if(this.userinfo.userType==='新用户' || this.userinfo.userType==='跑腿'){
					uni.navigateTo({
						url:"My_AppRegFil/My_AppRegFil?no="+item.no
					})
				}else if(this.userinfo.userType==='学生' || this.userinfo.userType==='学工'){
					console.log('222')
					uni.navigateTo({
						url:"./My_AppRegFil/My_AppResMerchant/My_AppResMerchant?no="+item.no
					})
				}
				
			},
			onloadSj(){
				//如果是学生或者跑腿 调用 学生跑腿接口
				if(this.userinfo.userType==='新用户' || this.userinfo.userType==='跑腿'){
					this.DataList.push(
						{
							no: "159862158991",
							userImg: "http://124.222.72.174:8008/images/头像/头像2.jpg",//可以不用
							userName: "梅开二度",//可以不用
							Ftime: "2022年4月9日 13:14",
							OFtime:"2022年4月16日 13:14",
							Fbphone:'13712345678',
							type: 2,//兼职
							title_x: "福州大学至诚学院食堂配餐员",
							working_date: "任意时间",
							working_hours: "12:00-13:00",
							working_address: "至诚四堂",
							working_Nr1: "外卖打包",
							working_Nr2: "食堂打菜",
							working_Nr3: "",
							working_Yq1: "不迟到,不早退",
							working_Yq2: "注意个人卫生",
							working_Yq3: "有上进心、认值负责",
							price: "￥80.00",
							
						}
					)
				//否则调用商户 和 学工 接口
				}else{
					this.DataList.push({
						no:'159862158991',
						userImg: "http://124.222.72.174:8008/images/头像/头像2.jpg",//报名人的头像
						userName: "梅开二度",//报名人的名称
						Ftime: "2022年4月9日 13:14",
						OFtime:"2022年4月16日 13:14",
						//学生姓名
						StuName: '方晓佳',
						//学生学号
						StuId: '212106710',
						//联系方式
						Stuphone:'19890540599',
						//学生专业
						Stumajor: '软件工程专升本',
						//学生宿舍
						Studormitory: '中2#405',
						//工作经验
						Stuwork1: '有过食堂经验',
						Stuwork2: '在飘香馆当过临时工',
						Stuwork3: '在益禾堂做过前台',
						price: "￥80.00",
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">
//头部样式
	.header_bt_01 {
		height: 115rpx;
		background-color: #FFFFFF;
		border-bottom: 2px solid #F7F7F7;

	}

	//头部样式--头像
	.hander_tx {
		width: 90rpx;
		height: 90rpx;
		border-radius: 100px;
		margin: 0px 0px 0px 8px;
	}

	//头部样式--取消字体 白色
	/deep/ .uni-searchbar__cancel {
		padding-left: 10px;
		line-height: 36px;
		font-size: 14px;
		color: #f3f3f3;
	}
	//底部校园状态样式
	.uni_bottor_xz_2 {
		position: relative;
	}
	
	//头像
	.uniBt_tx {
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 0px;
		width: 84rpx;
		height: 82rpx;
		border-radius: 100px;
	}
	
	//昵称
	.uniBt_Name {
		border-width: 0px;
		position: absolute;
		left: 116rpx;
		top: 12rpx;
		width: 300rpx;
		height: 54rpx;
		display: flex;
		font-family: '仿宋 Bold', '仿宋';
		font-weight: 700;
		font-style: normal;
		font-size: 16px;
	}
	
	//时间
	.uniBt_Time {
		border-width: 0px;
		position: absolute;
		left: 116rpx;
		top: 66rpx;
		width: 400rpx;
		height: 50rpx;
		display: flex;
		color: #A8A5A5;
		font-size: 13px;
	}
	
	//按钮
	.uniBt_but {
		border-width: 0px;
		position: absolute;
		left: 400rpx;
		top: 23rpx;
		width: 270rpx;
		height: 56rpx;
		background: inherit;
		background-color: rgba(217, 0, 27, 0.682352941176471);
		border: none;
		border-radius: 14px;
	}
	
	//内部2 
	.uni_bottor_xz_4 {
		position: relative;
	}
	
	//标题
	.nuiBt_title {
		border-width: 0px;
		//position: absolute;
		left: 52rpx;
		top: 160rpx;
		width: 300rpx;
		height: 34rpx;
		display: flex;
		font-size: 16px;
		padding: 5px;
	}
	
	//内容
	.nuiBt_text {
		//position: absolute;
		left: 52rpx;
		top: 220px;
		width: 378rpx;
		height: 220rpx;
		font-size: 13px;
		display: inline-block;
		font-family: "微软雅黑";
		padding: 5px;
	}
	
	//右侧图片
	.nuiBt_img {
		border-width: 0px;
		position: absolute;
		left: 380rpx;
		top: 10px;
		width: 190rpx;
		height: 200rpx;
		display: flex;
	}
	
	//右侧价格
	.nuiBt_Money {
		position: absolute;
		left: 400rpx;
		top: 240rpx;
		width: 160rpx;
		height: 36rpx;
		display: flex;
		color: #E55163;
	}
	
	//跑腿样式
	//绿色图标样式
	.uniBt_dd1 {
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 60rpx;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		float: left;
	}
	
	//取件地址样式
	.uniBt_address1 {
		border-width: 0px;
		position: absolute;
		left: 40rpx;
		top: 64rpx;
		width: 100rpx;
		height: 28rpx;
		display: flex;
		font-size: 12px;
		color: #191919;
		float: left;
	}
	
	//收件地址样式
	.uniBt_address1_1 {
		border-width: 0px;
		position: absolute;
		left: 150rpx;
		top: 64rpx;
		width: 400rpx;
		height: 30rpx;
		display: flex;
		font-size: 13px;
		float: left;
	}
	
	//橙点样式
	.uniBt_dd2 {
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 140rpx;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		float: left;
	}
	
	//取件地址样式
	.uniBt_address2 {
		border-width: 0px;
		position: absolute;
		left: 40rpx;
		top: 144rpx;
		width: 96rpx;
		height: 28rpx;
		display: flex;
		font-size: 12px;
		color: #191919;
		float: left;
	}
	
	//收件地址样式
	.uniBt_address2_2 {
		border-width: 0px;
		position: absolute;
		left: 150rpx;
		top: 144rpx;
		width: 400rpx;
		height: 30rpx;
		display: flex;
		font-size: 13px;
		float: left;
	}
	
	//金额样式
	.nuiBt_Picer {
		border-width: 0px;
		position: absolute;
		left: 380rpx;
		top: 16rpx;
		width: 200rpx;
		height: 31px;
		display: flex;
		color: #E55163;
		font-size: 14px;
	}
	
	//小标题样式
	.nuiBt_title_x {
		border-width: 0px;
		position: absolute;
		left: 8rpx;
		top: 60rpx;
		width: 320rpx;
		height: 26rpx;
		display: flex;
		font-size: 11px;
	}
	
	//边框样式 同样
	.uni_border_xs_1 {
		border-width: 0px;
		position: absolute;
		left: -15rpx;
		top: 110rpx;
		width: 180rpx;
		height: 94rpx;
		display: flex;
		border: 1px solid #000000;
		border-radius: 14px;
	}
	
	.uni_border_xs_2 {
		border-width: 0px;
		position: absolute;
		left: 185rpx;
		top: 110rpx;
		width: 180rpx;
		height: 94rpx;
		display: flex;
		border: 1px solid #000000;
		border-radius: 14px;
	}
	
	.uni_border_xs_3 {
		border-width: 0px;
		position: absolute;
		left: 385rpx;
		top: 110rpx;
		width: 180rpx;
		height: 94rpx;
		display: flex;
		border: 1px solid #000000;
		border-radius: 14px;
	}
	
	//工作日期 时段 地点样式 图片样式
	.uni_border_img_1 {
		position: absolute;
		left: 15rpx;
		top: 10rpx;
		width: 40rpx;
		height: 40rpx;
	}
	
	.uni_border_img_2 {
		position: absolute;
		left: 15rpx;
		top: 10rpx;
		width: 40rpx;
		height: 40rpx;
	}
	
	.uni_border_img_3 {
		position: absolute;
		left: 15rpx;
		top: 10rpx;
		width: 40rpx;
		height: 40rpx;
	}
	
	//工作日期 时段 地点样式 文字样式
	.uni_border_text_1 {
		position: absolute;
		//left: 10rpx;
		top: 27px;
		width: 88px;
		height: 11px;
		display: flex;
		font-family: '楷体';
		font-weight: 400;
		font-style: normal;
		font-size: 12px;
		text-align: center;
		display: block;
	}
	
	.uni_border_text_2 {
		position: absolute;
		//left: 20rpx;
		top: 27px;
		width: 88px;
		height: 11px;
		display: flex;
		font-family: '楷体';
		font-weight: 400;
		font-style: normal;
		font-size: 12px;
		text-align: center;
		display: block;
	}
	
	.uni_border_text_3 {
		position: absolute;
		//left: 40rpx;
		top: 27px;
		width: 88px;
		height: 11px;
		display: flex;
		font-family: '楷体';
		font-weight: 400;
		font-style: normal;
		font-size: 12px;
		text-align: center;
		display: block;
	}
	
	.uni_border_rt1 {
		border-width: 0px;
		position: absolute;
		left: 32px;
		top: 9px;
		width: 50px;
		height: 11px;
		display: flex;
		font-family: '楷体';
		font-weight: 400;
		font-style: normal;
		font-size: 11px;
	}
	
	.uni_border_rt2 {
		border-width: 0px;
		position: absolute;
		left: 32px;
		top: 9px;
		width: 50px;
		height: 11px;
		display: flex;
		font-family: '楷体';
		font-weight: 400;
		font-style: normal;
		font-size: 11px;
	}
	
	.uni_border_rt3 {
		border-width: 0px;
		position: absolute;
		left: 32px;
		top: 9px;
		width: 50px;
		height: 11px;
		display: flex;
		font-family: '楷体';
		font-weight: 400;
		font-style: normal;
		font-size: 11px;
	}
	
	//工作内容 工作要求 
	
	//金额样式
	.nuiBt_Picer_3 {
		border-width: 0px;
		position: absolute;
		left: 340rpx;
		top: 16rpx;
		width: 240rpx;
		height: 31px;
		display: flex;
		color: #E55163;
		font-size: 14px;
	}
	//编辑 删除按钮样式
	//删除
	.BjBunn1 {
		width: 90px;
		height: 32px;
		border: 2px solid red;
		color: red;
		margin-right: 10px;
		float: right;
		margin-bottom: 10px;
	}
	
	.BjBunn2 {
		width: 120px;
		height: 32px;
		border: 2px solid #51d3d3;
		color: #51d3d3;
		float: right;
	}
	.BjBunn3 {
		width: 90px;
		height: 32px;
		border: 2px solid #999999;
		color: #999999;
		margin-right: 10px;
		float: right;
	}
	.Uni-appfor-1{
		
	}
	.Uni-appfor-2{
		
	}
	.Uni-appfor-3{
		
	}
	.Uni-appfor-4{
		
	}
</style>
